//制作不同主题的按钮方法
@mixin btn-theme($color, $background-color, $border-color) {
    color: $color;
    background-color: $background-color;
    border-color: $border-color;
  
    &:hover {
      background: mix($color-white, $background-color, $button-hover-tint-percent);
      border-color: mix($color-white, $border-color, $button-hover-tint-percent);
      color: $color;
    }
    
    &:active {
      background: mix($color-black, $background-color, $button-active-shade-percent);
      border-color: mix($color-black, $border-color, $button-active-shade-percent);
      color: $color;
      outline: none;
    }
  
    &.is-active {
      background: mix($color-black, $background-color, $button-active-shade-percent);
      border-color: mix($color-black, $border-color, $button-active-shade-percent);
      color: $color;
    }
  
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: $color-white;
        background-color: mix($background-color, $color-white);
        border-color: mix($border-color, $color-white);
      }
    }
  
    &.is-plain {
      @include btn-plain($background-color);
    }
  }

  //朴素按钮制作方法
@mixin btn-plain($color) {
    color: $color;
    background: mix($color-white, $color, 90%);
    border-color: mix($color-white, $color, 60%);
  
    &:hover{
      background: $color;
      border-color: $color;
      color: $color-white;
    }
  
    &:active {
      background: mix($color-black, $color, $button-active-shade-percent);
      border-color: mix($color-black, $color, $button-active-shade-percent);
      color: $color-white;
      outline: none;
    }
  
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: mix($color-white, $color, 40%);
        background-color: mix($color-white, $color, 90%);
        border-color: mix($color-white, $color, 80%);
      }
    }
  }